<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
</head>
<body>
<h1>todo-list功能(v-for)</h1>
<div id="todo-list">
    <input v-model="inputVal"/>
<!--    绑定一个时间-->
    <button @click="handleSubmit">提交</button>
    <ul>
<!--        <li v-for="(idx) in lists" :key="idx">{{item}} {{idx}}</li>-->
<!--        <li-->
<!--                v-for="(item, idx) in lists"-->
<!--                :key="idx"-->
<!--                @click="del(idx)"-->
<!--        >-->
<!--            {{item}} {{idx}}-->
<!--        </li>-->
<!--        组件方式  通过属性的方式向子组件传值-->
<!--        监听子组件中传递过来的时间  v-on -> @del 监听del事件  -->
        <todo-list v-for="(item, index) in lists" :key="index" :item="item" :idx="index"  @del="ddd">{{item}}}</todo-list>


    </ul>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
    // new Vue({
    //     el: '#todo-list',
    //     data(){
    //         return {
    //             inputVal: '',
    //             lists: []
    //         }
    //     },
    //     methods: {
    //         handleSubmit(){
    //             this.lists.push(this.inputVal)
    //             // 置空输入值
    //             this.inputVal = ''
    //         },
    //         del(idx){  // 传递过来的是原生demo
    //             // alert('当前索引:' + idx)
    //             this.lists.splice(idx, 1)
    //         }
    //     }
    // });
    // 使用组件方式, 父组件向子组件传值
    Vue.component('todo-list', {
        template: '<li @click="dd">{{item}} {{idx}}</li>',  // 组件中的方法 不要传递参数
        props: ['item', 'idx'],
        methods: {
            dd(){
                // alert('当前索引:' + idx)
                this.$emit('del', this.idx)
            }
            // delete: function () {
            //     alert('当前索引:' + this.idx)
            // }
        }
    })
    new Vue({
        el: '#todo-list',
        data(){
            return {
                inputVal: '',
                lists: []
            }
        },
        methods: {
            handleSubmit(){
                this.lists.push(this.inputVal)
                // 置空输入值
                this.inputVal = ''
            },
            ddd(idx){  // 传递过来的是原生demo
                // alert('当前索引:' + idx)
                this.lists.splice(idx, 1)
            }
        }
    });








</script>


</html>